<template>
  <div class="app-container">
    <el-container style="border-bottom: 1px solid #E1E2E6" v-for="(typeList,key) in typeLists">
      <el-aside width="210px" style="padding: 30px 0;">
        <span v-if="key==1">到账类型:</span>
        <span class="aside-btn">全部</span>
      </el-aside>
      <el-container>
        <el-main>
          <ul class="main-btn" v-for="item in typeList">
            <li class="main-btn-title">{{item.arrivalName}}</li>
            <li class="icon-edit" @click="update(item.arrivalId)"><i class="el-icon-edit"></i></li>
            <li class="icon-close">
              <el-popover
                placement="top"
                width="160"
                :ref="`popover-${item.arrivalId}`"
              >
                <p>确定删除这条数据吗?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$refs[`popover-${item.arrivalId}`][0].doClose()">取消
                  </el-button>
                  <el-button type="primary" size="mini" @click.native.prevent="deleteInfotype(item.arrivalId)">确定
                  </el-button>
                </div>
                <i class="el-icon-close" slot="reference" v-popover:popover-${item.arrivalId}></i>
              </el-popover>
            </li>
          </ul>
          <div class="plus" @click="insert()">
            <i class="el-icon-plus"></i>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" width="440px">
      <el-form ref="infotype" :rules="rules" :model="infotype" label-width="120px">
        <el-form-item prop="arrivalName" label="到账类型名称" size="small">
          <el-input v-model="infotype.arrivalName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" size="small" @click="submitForm('infotype')" v-no-more-click>确定</el-button>
        <el-button size="small" @click="outerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
  import { addArrivalType, deleteArrivalType, getArrivalTypelist, selectArrivalType, updateArrivalType } from '@/api/arrivaltype'

  export default {
    data() {
      return {
        outerVisible: false,
        typeLists: {
          1: {}
        },
        dialogTitle: '新增到账类型',
        infotype: {
          arrivalName: ''
        },
        infotypeClear: {},
        rules: {
          arrivalName: [
            { required: true, message: '请输入类型名称', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      this.infotypeClear = JSON.parse(JSON.stringify(this.infotype))
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getArrivalTypelist().then(response => {
          this.typeLists['1'] = response.responseBody
          console.log(this.typeLists)
          this.listLoading = false
        })
      },
      insert() {
        if (this.$refs['infotype']) {
          this.$refs['infotype'].resetFields()
        }
        this.outerVisible = true
        this.dialogTitle = '新增到账类型'
        this.infotype = JSON.parse(JSON.stringify(this.infotypeClear))
        this.dialogType = 1
      },
      update(arrivalId) {
        if (this.$refs['infotype']) {
          this.$refs['infotype'].resetFields()
        }
        this.outerVisible = true
        this.dialogTitle = '修改到账类型'
        this.infotype = JSON.parse(JSON.stringify(this.infotypeClear))
        this.dialogType = 0
        const params = {
          arrivalId: arrivalId
        }
        selectArrivalType(params).then(response => {
          this.infotype = response.responseBody
        })
      },
      submitForm(formName) {
        const params = JSON.parse(JSON.stringify(this.infotype))
        console.log(this.$refs[formName])
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogType) {
              addArrivalType(params).then(response => {
                this.outerVisible = false
                this.fetchData()
              })
            } else {
              updateArrivalType(params).then(response => {
                this.outerVisible = false
                this.fetchData()
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      deleteInfotype(arrivalId) {
        console.log(this.$refs[`popover-${arrivalId}`])
        this.$refs[`popover-${arrivalId}`][0].doClose()
        const params = {
          arrivalId: arrivalId,
          isDel: 1
        }
        deleteArrivalType(params).then(response => {
          this.fetchData()
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #73B144;
  $grey: #717679;

  .el-aside {
    span {
      display: inline-block;
      padding: 10px;
      line-height: 25px;
      color: #555F6B;
    }
    .aside-btn {
      width: 65px;
      text-align: center;
      color: #fff;
      background: $bg;
      border-radius: 4px;
    }
  }

  .el-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30px;
    .main-btn {
      display: flex;
      flex-direction: row;
      width: 220px;
      height: 45px;
      padding: 15px;
      margin-right: 15px;
      margin-bottom: 30px;
      color: #fff;
      background: $grey;
      border-radius: 4px;
      &:hover {
        background: $bg;
      }
      li {
        display: flex;
        align-items: center;
      }
      .main-btn-title {
        width: 150px;
      }
      .icon-edit {
        flex-grow: 1;
        justify-content: right;
        cursor: pointer;
      }
      .icon-close {
        justify-content: right;
        cursor: pointer;
      }
    }
    .plus {
      width: 70px;
      height: 45px;
      text-align: center;
      font-size: 30px;
      line-height: 45px;
      color: #fff;
      background: $bg;
      border-radius: 4px;
      cursor: pointer;
    }
  }

</style>


<style rel="stylesheet/scss" lang="scss">

</style>
